<template>
    <!-- 首页 -->
    <div>
        <!-- 一行 -->
        <el-row>
            <!-- 第一列(第一个元素) -->
            <el-col :span="10">
                <!-- 显示用户名卡片 -->
                <el-card class="left-up-card">
                    <div class="userinfo">
                        <img :src="photoData.photo_url" alt="头像">
                        <div class="user">
                            <div class="title">{{photoData.username}}</div>
                            <div class="txt">{{photoData.status}}</div>
                        </div>
                    </div>
                    <!-- 上次用户登录时间 -->
                    <div class="loginInfo">
                        近期登录时间: {{photoData.last_login_time}}
                    </div>
                </el-card>

                <!-- 左下方卡片 -->
                <el-card class="left-down-card">
                    <el-table :data="tableData" stripe style="width: 100%" height="380px">
                        <el-table-column prop="last_login_time" label="上次登录日期" width="110">
                        </el-table-column>
                        <el-table-column prop="username" label="用户名" width="170">
                        </el-table-column>
                        <el-table-column prop="sex" label="性别" width="50">
                        </el-table-column>
                        <el-table-column prop="status" label="权限" width="90">
                        </el-table-column>
                        <el-table-column prop="phone" label="联系电话">
                        </el-table-column>
                    </el-table>
                </el-card>

            </el-col>
            <!-- 第二列(第二个元素) -->
            <el-col :span="14">
                <!-- 系统通知卡片 -->
                <el-card class="right-up-card" style="height: 400px;overflow: auto;">
                    <!-- 标题 -->
                    <div slot="header" class="clearfix">
                        <span>系统公告!</span>
                    </div>
                    <!-- 具体内容 -->
                    <div v-for="item in noticeList" :key="item.id" class="text" style="margin-bottom: 9px;">
                        时间:
                        &nbsp;&nbsp;
                        {{ item.time }}
                        &nbsp;&nbsp;
                        内容:
                        &nbsp;&nbsp;
                        {{ item.context }}
                    </div>
                </el-card>

                <!-- 右下方卡片 -->
                <el-card class="right-down-card">
                    <div ref="echarts" style="height: 350px;"></div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import * as echarts from 'echarts';
    import myAxios from '@/tools/myAxios';
    export default {
        name:'FirstHome',
        data() {
            return {
                // 表格数据
                tableData: [],
                // 头像部分
                photoData:{},
                // eCharts的动态数据
                eChartsData:[],
                // 系统通知的数据
                noticeList:[]
            }
        },
        created(){
            let userUrl = "";
            // 头像部分
            const user = JSON.parse(sessionStorage.getItem('user'));
            if(user !== null){
                this.photoData = user;
                if(this.photoData.status === "超级管理员"){
                    // 管理员登录时所显示的表格数据
                    userUrl = 'http://localhost:8088/admin/gettablelist'
                }else if(this.photoData.status === "员工"){
                    // 员工登录时所显示的表格数据
                    userUrl = 'http://localhost:8088/employee/gettablelist'
                }
            }
            // 表格部分
            myAxios(
                userUrl,          
                'get',
                null,
                (data)=>{
                    this.tableData = data;
                }
            )
            // 柱状图部分
            myAxios(
                'http://localhost:8088/home/getoption',
                'get',
                null,
                (data)=>{
                    this.eChartsData = data;
                }
            )
            // 系统通知部分
            myAxios(
                'http://localhost:8088/home/getnotice?isnotice=true',
                'get',
                null,
                (data)=>{
                    this.noticeList = data;
                }
            )
        },
        mounted(){
            // 等一会儿在执行
            setTimeout(()=>{
                this.FirstHomeECharts();
            },300)
        },
        methods:{
            // 给柱状图提供数据
            FirstHomeECharts(){
                // 基于准备好的dom，初始化echarts实例
                const myChart = echarts.init(this.$refs.echarts);
                // 柱状图数据
                const option={
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                        type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                        type: 'category',
                        data: ['管理员人数', '员工人数', '老人人数'],
                        axisTick: {
                            alignWithLabel: true
                        }
                        }
                    ],
                    yAxis: [
                        {
                        type: 'value'
                        }
                    ],
                    series: [
                        {
                        name: 'Number',
                        type: 'bar',
                        barWidth: '60%',
                        data: this.eChartsData
                        }
                    ]
                };
                myChart.setOption(option);
            }
        }
    }
</script>

<style lang="less" scoped>
    .left-up-card{
        .userinfo{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 20px;
            border-bottom: 1px solid #c1bebe;
            img{
                height: 160px;
                width: 160px;
                border-radius: 50%;
                margin-left: 20px;
            }
            .user{
                margin-right: 80px;
                .title{
                    font-size: 40px;
                }
                .txt{
                    color: #999;
                }
            }
        }
        .loginInfo{
            margin-top: 10px;
            color: #a8a2a2;
        }
    }
    .left-down-card{
        margin-top: 20px;
    }
    .right-up-card{
        margin-left: 20px;
        .clearfix{
            span{
                font-size: 20px;
            }
        }
        .text{
            font-size: 15px;
            color: #6c6a6a;
        }
    }
    .right-down-card{
        margin-left: 20px;
        margin-top: 20px;
    }
</style>